<template>
  <div v-if="goodShelves" class="item">
    <div class="code">
      {{ goodShelves.shelfNumber }}
    </div>
    <div class="donation">
      <img
        class="img"
        :src="
          goodShelves.donation && goodShelves.donation.images
            ? goodShelves.donation.images
            : require('@/assets/vm/default_donation.png')
        "
      />
      <div class="name">
        <el-button
          type="text"
          @click="handleDonationDetail(goodShelves.donationId)"
          >{{
            goodShelves.donation ? goodShelves.donation.oddNumber : "暂无商品"
          }}</el-button
        >
      </div>
    </div>
    <!-- 捐赠物详情对话框 - 使用组件 -->
    <donation-detail-dialog ref="donationDetailRef" @handle-close-donation="handleCloseDonation" />
  </div>
</template>
<script setup>
import { require } from "@/utils/validate";
import { getDonation } from "@/api/manage/donation";
import DonationDetailDialog from "@/views/manage/donation/components/DonationDetailDialog.vue";
import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const { donation_status } = proxy.useDict("donation_status");
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
  goodShelves: {
    type: Object,
    default: () => {},
  },
});
//捐赠物详情
const donationDetailRef = ref(null);

/** 根据状态设置标签类型 */
const getStatusType = (status) => {
  if (status === 0) {
    return ""; // 对应蓝色
  } else if (status === 1) {
    return "danger"; // 对应红色
  } else if ([3, 4].includes(status)) {
    return "success"; // 对应绿色
  } else if (status === 2) {
    return "warning"; // 对应黄色
  } else if (status === 5) {
    return "info"; // 对应灰色
  }
  // 默认返回空字符串，避免无效状态影响样式
  return "";
};

/** 根据字典选项获取标签文本 */
const getDictLabel = (options, value) => {
  for (let i = 0; i < options.length; i++) {
    if (options[i].value == value) {
      return options[i].label;
    }
  }
};

// 处理查看捐赠物详情 - 调用组件的方法
function handleDonationDetail(id) {
  if(id == null) {
    return;
  }
  // 直接调用组件的方法，让组件自己加载数据
  donationDetailRef.value?.handleLookDetails(id);
}

// 关闭捐赠物详情对话框
function handleCloseDonation() {
  // 不需要做任何事情，组件会自己处理关闭逻辑
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.module.scss";
.item {
  position: relative;
  width: 150px;
  height: 180px;
  background: $base-menu-light-background;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  text-align: center;

  .code {
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0px 10px 10px 0px;
    font-size: 12px;
    color: $base-menu-light-background;
  }

  .donation {
    height: 135px;
    padding-top: 16px;
    background-color: #f6f7fb;
    border-radius: 1px;

    .img {
      display: inline-block;
      width: 84px;
      height: 78px;
      margin-bottom: 10px;
      object-fit: contain;
    }

    .name {
      padding: 0 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
